<template>
  <NEl class="p-4 top-box">
    <div>简易留言板</div>
    <div>
      <NSpace>
        <NInput v-model:value="queryInfo.info" placeholder="留言内容"></NInput>
        <!-- 发布 -->
        <div>
          <NButton type="primary" @click="addReply">发布</NButton>
        </div>
      </NSpace>
    </div>
    <HuUserlnfo></HuUserlnfo>
  </NEl>

  <NButton @click="showAdd" type="primary">发布评论</NButton>
  <NModal title="发布帖子" preset="dialog" v-model:show="visible">
    <div>
      <NForm>
        <NFormItem>
          <NInput v-model:value="addInfo.title" placeholder="留言标题"></NInput>
        </NFormItem>
        <NFormItem>
          <NInput v-model:value="addInfo.info" placeholder="留言内容"></NInput>
        </NFormItem>
      </NForm>
    </div>
    <template #action>
      <NButton type="primary" @click="addReply">发帖</NButton>
      <NButton type="error">取消</NButton>
    </template>
  </NModal>

  <div class="pl-20 pr-20" style="width: 50vw; margin: 0px auto">
    <!-- 排序 -->
    <NTabs @update-value="changeOrder">
      <NTabPane name="1" tab="最新"></NTabPane>
      <NTabPane name="2" tab="高赞"></NTabPane>
      <NTabPane name="3" tab="热门"></NTabPane>
      <NTabPane name="4" tab="热评"></NTabPane>
    </NTabs>

    <!-- 骨架屏 -->
    <div v-if="loading">
      <div v-for="i in 5" :key="i" class="ml-40 mr-40 mb-40">
        <NCard>
          <NSkeleton text></NSkeleton>
          <div class="img-box">
            <NSkeleton class="vimg" text></NSkeleton>
          </div>
        </NCard>
      </div>
    </div>
    <!-- 数据列表 -->
    <div v-else>
      <div v-for="d in list" :key="d.mid" class="mb-4">
        <div>
          <NCard>
            <div @click="toDetail(d.mid)" class="fs-3">{{ d.title }}...</div>
            <div class="detail mb-2 mt-2">
              <div>
                {{ d.title }}

                {{ Tools.formatDate(d.lastupdate, 'yyyy-MM-dd') }}
                点击量：{{ d.hits }}
                <div v-if="d.exInfo.mine" @click="delReply(d.mid)">删除</div>
                <div v-if="d.exInfo.mine" @click="modify">修改</div>
              </div>
              <div>
                <NPopover trigger="hover">
                  <span>点赞量：{{ d.praise }}</span>
                  <template #trigger>
                    <div click="listNews(d)" :class="{ action: d.exInfo.praised }">赞</div>
                  </template>
                </NPopover>
              </div>
            </div>
          </NCard>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import HuUserlnfo from '@/components/HuUserlnfo.vue'
import { ref, onMounted, onUnmounted } from 'vue'
import type { TbDataNews } from '@/types/ThirdApi'
import type { BaseDataResult, PageBean, PageVO } from '@/types/BaseResult'
import { Api } from '@/types/Api'
import { Tools } from '@/types/Tools'
import { useRouter } from 'vue-router'
const router = useRouter()
import {
  useMessage,
  NCard,
  NSkeleton,
  NSpace,
  NPopover,
  NButton,
  NSpin,
  NInput,
  NEl,
  NTabs,
  NTabPane,
  NBackTop,
  NModal,
  NForm,
  NFormItem,
} from 'naive-ui'
import type { TbMessage } from '@/types/message'

const message = useMessage()
const loading = ref(false)
const firstLoad = ref(true)

// #region 查询
const page = ref({ pageNumber: 1, pageSize: 10 } as PageBean)
const list = ref([] as TbMessage[])
const queryInfo = ref({ order: 1, info: '' })

const query = () => {
  loading.value = true
  Api.get(
    `/message/${page.value.pageSize}/${page.value.pageNumber}/${queryInfo.value.order}`,
    { info: queryInfo.value.info },
    (data: BaseDataResult<PageVO<TbMessage>>) => {
      loading.value = false
      if (data.success) {
        list.value = list.value.concat(data.data.list)
        page.value = data.data.pageBean
        firstLoad.value = false
        return
      }
      message.error(data.message)
    },
  )
}

const changeOrder = (order: number) => {
  queryInfo.value.order = order
  requery()
}

const search = () => {
  page.value.pageNumber = 1
  firstLoad.value = true
  list.value = []
  query()
}

const requery = () => {
  firstLoad.value = true
  page.value.pageNumber = 1
  queryInfo.value.info = ''
  list.value = []
  query()
}

const loadmore = () => {
  page.value.pageNumber++
  if (page.value.pageNumber > page.value.pageCount) {
    return
  }
  query()
}

// #endregion

// //#region 滚动相关
// const scroll = () => {
//   // console.log('滚动了')
//   if (loading.value) {
//     return
//   }
//   // console.log('是否到底部:', isScrollToBottom())
//   if (isScrollToBottom()) {
//     loadmore()
//   }
// }

// const isScrollToBottom = () => {
//   const scrollTop = document.documentElement.scrollTop || window.scrollY
//   const sh = document.documentElement.scrollHeight
//   const ch = document.documentElement.clientHeight
//   return scrollTop + ch >= sh - 100
// }

// // #endregion
// #region 详情
const toDetail = (id: number) => {
  router.push(`/news/reply/${id}`)
}
// #endregion

// #region

// #region 挂载
onMounted(() => {
  requery()
  window.addEventListener('scroll', scroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', scroll)
})

//#region 发布帖子
const visible = ref(false)
const addInfo = ref({} as TbMessage)

const showAdd = () => {
  visible.value = true
  addInfo.value.title = ''
  addInfo.value.info = ''
}

const addReply = () => {
  loading.value = true
  Api.post('/message', addInfo.value, (data: BaseDataResult<PageVO<TbMessage>>) => {
    loading.value = false
    if (data.success) {
      visible.value = false
      message.success(data.message)
    } else {
      message.error(data.message)
    }
  })
}

// #region 删除
const delReply = (mid: number) => {
  loading.value = true
  Api.delete(`/message/${mid}`, {}, (data: BaseDataResult<PageVO<TbMessage>>) => {
    loading.value = false
    if (data.success) {
      message.success('删除成功')
      addReply()
      return
    }
    message.error(data.message)
  })
}

// #region 修改
const mvisible = ref(false)
const modifInfo = ref({} as TbMessage)

const showAbb = () => {
  visible.value = true
  addInfo.value.title = ''
  addInfo.value.info = ''
}
const modify = () => {
  loading.value = true
  Api.put('/message', modifInfo.value, (data: BaseDataResult<PageVO<TbMessage>>) => {
    loading.value = false
    if (data.success) {
      mvisible.value = false
      message.success('修改成功')
      return
    }
    message.error(data.message)
  })
}

// #endregion
</script>

<style scoped lang="scss">
.top-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: sticky;
  top: 0px;
  z-index: 10;
  background-color: var(--body-color);
}
.vimg {
  display: block;
  height: 7vw;
}
.img-box {
  display: flex;
  gap: 1rem;
  > div {
    flex: 1;
  }
  img {
    display: block;
    aspect-ratio: 16 / 9;
    width: 100%;
    object-fit: cover;
  }
}
.detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .action {
    color: #ff0000;
  }
}
</style>
